<template>
  <div id="app">
    <!--
      页面中需要有两个可以切换页面的标签
     -->
     <!-- router-link中to属性的值必须和路由配置对象中的path保持一致 -->
     <router-link to="/">首页</router-link>
     <router-link to="/about">about</router-link>

    <!-- 点击时，需要将匹配到的页面渲染到这个位置 -->
    <main>
      <!-- 路由匹配规则匹配到的组件，需要通过router-view组件来渲染 -->
      <router-view></router-view>
    </main>
  </div>
</template>
<script>
export default {
  mounted () {
    console.log(this)
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

/* router-link-exact-active 表示精确匹配到的类名 */
a.router-link-exact-active {
  color: #42b983;
}
main  {
  background-color: yellow;
  border: 1px solid #000;
  height: 600px;
}
</style>
